import {useState,useEffect,useRef} from 'react'
import CamundaAPI from "@/api/CamundaApi.js";
import {Input,Button,Modal} from 'antd'
const { TextArea } = Input;
function Variable(props){
    // ProcessInstance , Task ,Execution
    const type = props.type;
    const [processVar,setProcessVar] = useState("")
    
    const title = useRef("")

    function pageInit(props){
        if(type === 'ProcessInstance' || type === 'Execution'){
            title.current = "ProcessInstance"
            CamundaAPI.queryVariableByProcessInstanceId(props.dataId).then(r => {
                setProcessVar(JSON.stringify(r.result))
            })
        }

        if(type === 'Execution'){
            title.current = "Execution"
            CamundaAPI.queryVariableByProcessInstanceId(props.dataId).then(r => {
                setProcessVar(JSON.stringify(r.result))
            })
        }
    
        if(type === 'Task'){
            title.current = "Task"
            CamundaAPI.queryVariableByTaskId(props.dataId).then(r => {
                setProcessVar(JSON.stringify(r.result))
            })
        }
    }
    
    useEffect( ()=>{
        pageInit(props)
    },[])
    

    function saveVariable(){
        const currentProcessVar = JSON.parse(processVar);
        const params = {
            id:props.dataId,
            processVar : currentProcessVar
        }



        if(type === 'ProcessInstance'){
            CamundaAPI.addVariableToProcessInstance(params).then(r => {
                Modal.success({
                    title:"Process Variable Be Saved Successful",
                    centered: true,
                    okText: "确认",
                    width:700,
                    onOk() {
                      // 弹出登录弹框
                    },
                  });
            })
        }

        if(type === 'Execution'){
            CamundaAPI.addVariableToProcessInstance(params).then(r => {
                Modal.success({
                    title:"Execution Be Saved Successful",
                    centered: true,
                    okText: "确认",
                    width:700,
                    onOk() {
                      // 弹出登录弹框
                    },
                  });
            })
        }
       
        if(type === 'Task'){
            CamundaAPI.addVariableToTask(params).then(r => {
                Modal.success({
                    title:"Process Variable Be Saved Successful",
                    centered: true,
                    okText: "确认",
                    width:700,
                    onOk() {
                      // 弹出登录弹框
                    },
                  });
            })
        }



        
    }

    return (
        <div>
            <div className="callout callout-info">
                  <h3>{title.current} Variable</h3>
                  <div>

                    eg. {JSON.stringify({"approvers":"zhangsan","age":"5"})}
                  {/* {JSON.stringify(processVar)} */}
                  <TextArea
              showCount
              autoSize
              value={processVar}
              onChange={(e)=>{setProcessVar(e.target.value)}}
            ></TextArea>

            <Button onClick={saveVariable}>Save Process Variable</Button>
                  </div>
            </div>
        </div>
    )
}

export default Variable;